import { globalStyle, style } from '@vanilla-extract/css';
import { vars } from '../global.css';
import { buttonStyle } from '../button/button.css';

export const titleBarStyle = style({
	display: 'flex',
	flexDirection: 'row',
	alignItems: 'stretch',
	height: '3.5em',
	borderBottom: `1px solid ${vars.color.border}`,
});

globalStyle(`${titleBarStyle}>${buttonStyle}`, {
	backgroundColor: 'transparent',
	border: 'none',
	cursor: 'default',
});

globalStyle(`${titleBarStyle}>${buttonStyle}:avtive`, {
	backgroundColor: vars.color.lightFill,
	border: 'none',
});

globalStyle(`${titleBarStyle}>div[name=title]`, {
	flex: '1',
	userSelect: 'none',
	whiteSpace: 'nowrap',
	wordBreak: 'keep-all',
	overflow: 'hidden',
	textOverflow: 'ellipsis',
	fontWeight: 'bold',
	fontSize: '1.2em',
	display: 'flex',
	alignItems: 'center',
	padding: '0 0.2em',
});
